<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-21 21:11:40
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-21 21:47:12
 * @FilePath: \shangyitong\src\pages\home\tip\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="tip">
        <!-- 常见科室结构 -->
        <div class="deparment">
            <div class="header">
                <div class="left">
                    <i class="iconfont icon-icon1"></i>
                    <span>常见科室</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>神经内科</li>
                    <li>消化内科</li>
                    <li>呼吸内科</li>
                    <li>内科</li>
                    <li>神经外科</li>
                    <li>妇科</li>
                    <li>产科</li>
                    <li>儿科</li>
                </ul>
            </div>
        </div>
        <!-- 平台公告 -->
        <div class="noice">
            <div class="header">
                <div class="left">
                    <i class="iconfont icon-tongzhi"></i>
                    <span>平台公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>关于延长北京大学国际医院放假的通知</li>
                    <li>北京中医药大学东方医院部分科室医生门诊医</li>
                    <li>武警总医院号源暂停更新通知</li>
                </ul>
            </div>
        </div>
        <!-- 停诊公告 -->
        <div class="noice">
            <div class="header">
                <div class="left">
                    <i class="iconfont icon-tongzhi1"></i>
                    <span>停诊公告</span>
                </div>
                <div class="right">
                    <span>全部</span>
                    <i class="iconfont icon-xiangyou1"></i>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li>中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告</li>
                    <li>首都医科大学附属北京潞河医院老年医学科门诊停诊公告</li>
                    <li>中日友好医院中西医结合心内科门诊停诊公告</li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { } from 'vue'
</script>

<style lang="scss" scoped>
.tip {
    color: #7f7f7f;

    .deparment {
        .header {
            display: flex;
            justify-content: space-between;

            .left {
                display: flex;

                span {
                    margin-left: 5px;
                }
            }
        }

        .content {
            ul {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                justify-content: space-between;

                li {
                    width: 40%;
                    margin-top: 20px;
                }
            }

        }
    }

    .noice {
        margin: 20px 0 0 0;

        .header {
            display: flex;
            justify-content: space-between;

            .left {
                display: flex;

                span {
                    margin-left: 5px;
                }
            }
        }

        .content {
            ul {
                li {
                    margin: 10px 0 0 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>
